<template>
  <d2-container class="page">
    <div class="flex" style="height:100%">
      <div class="w-252">
        <el-menu style="height:100%;overflow-y: auto;" default-active="0">
          <el-menu-item :index="key + ''" v-for="(item, key) in dataList" :key="key" @click="setActiveContent(item)">
            <span slot="title">{{ item.fileName }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="flex-item-1" style="height:100%;position: relative">
        <div class="pd-y-10 pd-l-10 flex flex-y-center" style="position:absolute;right: 20px; top:0;z-index: 10">
          <el-popover placement="right" width="300" trigger="click">
            <div>
              <strong>模板替换说明</strong>
              <div>
                <span>{{</span>
                <span>tableName</span>
                <span>}}：表名、模块名</span>
              </div>
              <div>
                <span>{{</span>
                <span>tableComment</span>
                <span>}}：表备注</span>
              </div>
              <div>
                <span>{{</span>
                <span>each tableColumns</span>
                <span>}}：循环表字段开始</span>
              </div>
              <div>
                <span>{{</span>
                <span>$value.columnComment</span>
                <span>}}：字段标题</span>
              </div>
              <div>
                <span>{{</span>
                <span>$value.columnName</span>
                <span>}}：字段名</span>
              </div>
              <div>
                <span>{{</span>
                <span>$value.columnType</span>
                <span>}}：字段类型</span>
              </div>
              <div>
                <span>{{</span>
                <span>$value.columnLength</span>
                <span>}}：字段长度</span>
              </div>
              <div>
                <span>{{</span>
                <span>/each</span>
                <span>}}：循环表字段结束</span>
              </div>
            </div>

            <el-button size="mini" icon="el-icon-question" circle slot="reference"></el-button>
          </el-popover>
          <div class="pd-r-10"></div>
          <el-button @click="cmOptions.readOnly = !cmOptions.readOnly" v-if="cmOptions.readOnly" size="mini" icon="el-icon-edit" circle></el-button>
          <el-button @click="saveTemplate" v-else type="success" size="mini" icon="el-icon-document-checked" circle></el-button>
        </div>
        <codemirror class="my-codemirror" v-model="activeContent" :options="cmOptions"></codemirror>
      </div>
    </div>
  </d2-container>
</template>

<script>
import { getFiles, updateFile } from '../../../api/sys/database.api'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/mode/python/python.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/comment-fold.js'

export default {
  components: {
    codemirror
  },
  data() {
    return {
      dataList: [],
      activeContent: '',
      activeFileName: '',
      cmOptions: {
        value: '',
        //mode:'text/html',//模式
        theme: 'darcula', //主题
        indentUnit: 2,
        smartIndent: true,
        tabSize: 4,
        readOnly: true, //只读
        showCursorWhenSelecting: true,
        lineNumbers: true, //是否显示行数
        firstLineNumber: 1
      }
    }
  },
  created() {
    getFiles({ folderName: 'template' }).then(d => {
      this.dataList = d.aaData
      this.activeContent = d.aaData[0].fileContent
      this.activeFileName = d.aaData[0].fileName
    })
  },
  methods: {
    setActiveContent(item) {
      if (this.cmOptions.readOnly == false) {
        this.$message.error('编辑类容未保存！')
        return
      }
      this.activeContent = item.fileContent
      this.activeFileName = item.fileName
    },
    async saveTemplate() {
      let res = await updateFile({ folderName: 'template', fileName: this.activeFileName, fileContent: this.activeContent })
      this.$message.success('保存成功！')
      this.cmOptions.readOnly = !this.cmOptions.readOnly
    }
  }
}
</script>
<style lang="scss" scoped>
.my-codemirror {
  height: 100%;
  ::v-deep.CodeMirror {
    height: 100%;
  }
}
</style>
